<template>
  <div class="table-case">
    <MyTable :data="goodList" v-on:swapThem="swapThem">
      <template #head>
          <th>编号</th>
          <th>商品名</th>
          <th>商品展示</th>
          <th width="100px"></th>
      </template>
      <!-- 解构也是可以的 #body="{ item, index }" -->
      <template #body="slotProps">
        <td>{{ slotProps.index + 1 }}</td>
          <td>{{ slotProps.item.name }}</td>
          <td>
            <img width="100" height="100" :src="slotProps.item.picture" />
          </td>
          <td>
          <MyTag v-model="slotProps.item.tag"></MyTag>
      </td>
      </template>
    </MyTable>
  </div>
</template>

<script>
import MyTable from './components/MyTable.vue'
import MyTag from './components/MyTag.vue'
export default {
  name: 'TableCase',
  components: {
    MyTable,
    MyTag
  },
  data () {
    return {
      goodList: []
    }
  },
  created () {
    this.fetchListItem()
  },
  methods: {
    async fetchListItem () {
      // axios.get('http://localhost:3000/goods').then((res) => {
      //   this.goodList = res.data
      // })
      this.goodList=[
    {
      "id": 1,
      "picture": "https://static.nike.com.cn/a/images/t_PDP_864_v1/f_auto,b_rgb:f5f5f5/a43f1f52-6850-4cab-837f-b93ff752f16d/ja-1-ep-%E5%B0%8F%E9%87%91%E9%BE%99%E9%BE%99%E5%B9%B4%E6%AC%BE%E5%AE%9E%E6%88%98%E8%B4%BE%E8%8E%AB%E5%85%B0%E7%89%B9%E7%94%B7%E5%AD%90%E7%AF%AE%E7%90%83%E9%9E%8B-ZLQQx9.png",
      "name": "“小金龙”龙年款实战贾莫兰特男子篮球鞋",
      "tag": "篮球鞋"
    },
    {
      "id": 2,
      "picture": "https://static.nike.com.cn/a/images/t_PDP_864_v1/f_auto,b_rgb:f5f5f5,u_126ab356-44d8-4a06-89b4-fcdcc8df0245,c_scale,fl_relative,w_1.0,h_1.0,fl_layer_apply/dcb6b305-9d83-43b8-8b93-d7761ab4d6a8/air-jordan-legacy-312-%E9%9D%92%E9%BE%99%E7%94%B7%E5%AD%90%E8%BF%90%E5%8A%A8%E9%9E%8B-bssr37.png",
      "name": "Air Jordan Legacy 312 “青龙”男子运动鞋",
      "tag": "运动鞋"
    },
    {
      "id": 3,
      "picture": "https://static.nike.com.cn/a/images/t_PDP_864_v1/f_auto,b_rgb:f5f5f5/406bd965-8f3e-4af8-bfe1-c0375cd4fd19/custom-sabrina-1-by-you.png",
      "name": "Sabrina 1 By You 专属定制篮球鞋",
      "tag": "定制"
    },
    {
      "id": 4,
      "picture": "https://static.nike.com.cn/a/images/t_PDP_864_v1/f_auto,b_rgb:f5f5f5/ba3a7f48-77d9-49aa-ad2b-24d0df830bac/lebron-21-ep-%E7%94%B7%E5%AD%90%E7%AF%AE%E7%90%83%E9%9E%8B-wK6QND.png",
      "name": "LeBron XXI EP 男子篮球鞋",
      "tag": "人物系列"
    }
  ]
    },
    swapThem (value) {
      const { start, end } = value
      // 交换元素位置
      const removedStart = this.goodList.splice(start, 1)[0]
      const removedEnd = this.goodList.splice(end - 1, 1, removedStart)[0]
      this.goodList.splice(start, 0, removedEnd)

      console.log(this.goodList)
    }
  }
}
</script>

<style lang="less"  scoped>

</style>

